<template>
  <div>
    <my-skeleton v-if="initLoading"></my-skeleton>
    <div class="book-detail" v-else>
      <s-nav-bar class="nopad" :title="$route.meta.navBarTitle">
        <a href="javascript:;" @click="$toast('搜索暂未开放')"><van-icon name="search" /></a>
        <!-- <router-link to="/search"><van-icon name="search" /></router-link> -->
      </s-nav-bar>
      <div class="info-wrap">
        <div><img :src="$store.state.imgPath+data.img"></div>
        <div>
          <h1>{{data.book}}</h1>
          <p>作者：{{data.author}}</p>
          <p>分类：{{data.kind}}</p>
          <p>状态：{{data.status}}</p>
          <p class="v-c"><span>评价：</span><star :grade="5" :size="12"></star></p>
        </div>
      </div>
      <div class="btns vh-c nopad">
        <router-link :to="`/article/${id}?section=2`">立即阅读</router-link>
        <a href="javascript:;" @click="putBookStore">加入书架</a>
      </div>
      <div class="line nopad"></div>
      <div class="abstract">
        <h4>内容简介</h4>
        <p>{{data.summary}}</p>
      </div>
      <div class="line nopad"></div>
      <div class="list">
        <h4>目录<span>（共 {{data.count}} 章）</span></h4>
        <ul>
          <li v-for="(item,index) in data.section" :key="index">
            <router-link :to="`/article/${id}?section=${item.id}`">{{item.name}}</router-link>
          </li>
        </ul>
        <router-link :to="`/more/list?articleid=${id}`" class="btn-more-list vh-c">更多目录<van-icon name="arrow" /></router-link>
      </div>
      <div class="line nopad"></div>
      <div class="comment">
        <h4>精彩评论
          <span>（{{data.comment.length}}）</span>
          <a href="javascript:;" @click="$toast('未登录，请先登录')" class="f-r v-c">
            <van-icon name="comment-o" />写评论
          </a>
        </h4>
        <comment v-for="(item,index) in data.comment" :key="index" :data="item"></comment>
        <div class="empty-com" v-if="data.comment.length==0">
          <span>还没有人留下评论哦</span>
        </div>
      </div>
      <load-more :show="dataLoading"></load-more>
    </div>
  </div>
</template>

<script>
import MySkeleton from '@/components/MySkeleton.vue'
import sNavBar from '@/components/sNavBar.vue'
import Star from '@/components/Star.vue'
import Comment from '@/components/Comment.vue'
import LoadMore from '@/components/LoadMore.vue'
export default {
  components:{
    MySkeleton,
    sNavBar,
    Star,
    Comment,
    LoadMore
  },
  data(){
    return {
      dataLoading:false,
      initLoading:true,
      data:[],
      id:this.$route.params.id
    }
  },
  methods:{
    putBookStore(){
      this.$toast({
        message:'未登录，请先登录',
        onClose(){
          // 跳转到登录页

        }
      });
    }
  },
  created(){
   
    //获取数据
    this.$http.get(this.$route.meta.dataURL,{
      params:{
        id:this.id
      }
    })
    .then(res => {
     
      let {datalist} = res.data.data
      if(!datalist){
        return this.$router.replace('/404')
      }
      //设置title
      document.title = datalist.book + ' - 书籍详情 - 喜阅'
      this.data = datalist

      setTimeout(()=>{
        this.initLoading = false
      },1000)
       
    })
    .catch(err => {
      throw ('NET ERROE!')
    })
  }
}
</script>

<style>
.book-detail h1,.book-detail h4{
  font-size: 17px;
  margin-bottom: 10px;
}
.book-detail>div:not(.nopad){
  padding-left:15px;
  padding-right:15px;
}
/* 书本详情 */
.info-wrap{
  display: flex;
  padding-top: 15px;
  padding-bottom: 15px;
}
.info-wrap img{
  border-radius: 4px;
  width: 100px;
  height: 130px;
}
.info-wrap>div:nth-child(2){
  margin-left: 15px;
}

.info-wrap p,.abstract p,.list li{
  font-size: 14px;
  color: #888;
  margin-bottom: 5px;
}
/* 按钮 */
.btns>a{
  width: 47%;
  margin: 0 10px;
  padding: 6px 12px;
  font-size: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #ff976a;
  border-radius: 4px;
}
.btns>a:first-child{
  color: #fff;
  background: #ff976a;
}
.btns>a:nth-child(2){
  color: #ff976a;
}
/* 内容简介 */
.abstract p{
  text-indent: 2em;
}
.list>h4>span,.comment>h4>span{
  font-size: 12px;
  font-weight: normal;
  color: #ABA49A;
}
.list li{
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.list li>a{
  color: #888;
  margin-left: 2em;
}
.btn-more-list{
  border: 1px solid #E4E0DD;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  line-height: 29px;
  color:#998D7F;
  margin-top: 20px;
}
/* 评论 */
.comment>h4>a{
  font-weight: normal;
  font-size: 14px;
  color: #ff976a;
  line-height: 1.8;
}
.comment>h4 .van-icon{
  margin-right: 5px;
}
/* 空 */
.empty-com{
  font-size: 14px;
  color: #888;
  text-align: center;
  padding: 40px 0 60px;
  
}
</style>